<template>
  <detailsLayout :leftTitle="`全部${pageTitle}`">
    <div class="page-cell"> 
      <ul class="object-list" v-show="pageTitle=='作案工具'"> <!--作案工具-->
        <cardBlock class="object-item" v-for="(item,index) in znObjectData" :key="`obj_zngj_${index}`" :imgUrl="item.xp">
          <div slot="name" class="card-name">
            <strong class="name">{{item.mc}}</strong>
          </div> 
          <div class="info-grid" slot="data">
            <div class="grid-item align-left" v-for="i in item.rowArr">
              <em>{{i.col_cn}}</em> <span>{{i.col_val}}</span>
            </div> 
          </div> 
        </cardBlock> 
      </ul>
      
      <ul class="object-list" v-show="pageTitle=='损失物件'"> <!--损失物件-->
        <cardBlock class="object-item" v-for="(item,index) in ssObjectData" :key="`obj_sswp_${index}`" :imgUrl="item.xp">
          <div slot="name" class="card-name">
            <strong class="name">{{item.mc}}</strong>
          </div> 
          <div class="info-grid no-wrap" slot="data">
            <div class="grid-item align-left" v-for="i in item.rowArr">
              <em>{{i.col_cn}}</em> <span>{{i.col_val}}</span>
            </div> 
          </div> 
        </cardBlock>
      </ul>
    </div>
  </detailsLayout>
</template>

<script>
import { mapState } from 'vuex'
import detailsLayout from '../../components/details-layout'
import cardBlock from '../../components/card-block'
export default {
  name: 'subPageObject',
  props: {
  },
  data() {
    return {
      pageTitle: '损失物件'
    }
  },
  components: {
    detailsLayout, cardBlock
  },
  filters: {
  },
  methods: {
  },
  computed: {
    ...mapState('caseStore', {
      znObjectData: 'znObjectData', // 作案物件
      ssObjectData: 'ssObjectData' // 损失物件
    })
  },
  mounted() {
    this.pageTitle = this.$route.query.titleKey
  },
  created() {
    if (!this.znObjectData.length && !this.ssObjectData.length) {
      this.$router.push({path: '/case'})
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
// @import "../../style/public";
@import "../../style/mixin";
@import "../../style/public";
.clearfix {
  @include clearfix  
}
.page-cell {
  font-size: 1rem;
  // line-height: 1.4;
  margin:0 auto;
  max-width:640px;
}
.object-list{
  padding: 0 3%;
  .object-item{
    .card-name{ 
      strong.name{ 
        font-size: 1.1rem;
        vertical-align: middle;
      }
      span{ 
        display:inline-block;
        font-size: .5rem; 
        padding: 0 .3rem;
        color: #fff;
        border-radius: .2rem;
        vertical-align: middle;
        background: #ff6600;
      }
    }
  }
}
 
</style>
